<template>
  <div class="option-items-pane">
    <draggable
      tag="ul"
      :list="optionModel.tableCols"
      v-bind="{
        group: 'optionsGroup',
        ghostClass: 'ghost',
        handle: '.drag-option',
      }"
    >
      <li v-for="(option, idx) in optionModel.tableCols" :key="option">
        <!-- <el-input v-model="option.value" size="mini" style="width: 100px">
        </el-input>
        <el-input v-model="option.label" size="mini" style="width: 100px">
        </el-input> -->
        <i
          class="el-icon-edit edit-icon"
          :title="option"
          @click="toTableColEdit(option)"
        />
        <el-tag
          type="info"
          size="small"
          title="复制列id"
          style="width: 200px"
          :data-clipboard-text="option"
          @click="(e) => copyFormJson(e, option)"
        >
          {{ `${fieldLib[option].options.tableLabel}#${option}` }}
        </el-tag>
        <i class="iconfont icon-drag drag-option" />
        <el-button
          circle
          plain
          size="mini"
          type="danger"
          icon="el-icon-minus"
          class="col-delete-button"
          @click="deleteCol(option, idx)"
        />
      </li>
    </draggable>
    <div>
      <el-button type="text" @click="addCol">
        {{ i18nt("designer.setting.addCol") }}
      </el-button>
      <!-- <el-button type="text" @click="importCol">
        {{ i18nt("designer.setting.importCol") }}
      </el-button> -->
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import tableMixin from "./tableMixin";
import i18n from "Yan/utils/i18n";
import $DialogJs from "Yan/utils/extendDialog";
import ColImportDialog from "./ColImportDialog.vue";
import { copyToClipboard } from "Yan/utils";

export default {
  name: "ColItemsSetting",
  mixins: [i18n, tableMixin],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    optionModel: Object,
  },
  data() {
    return {};
  },
  watch: {
    "optionModel.tableCols": {
      handler(n) {
        // console.log("optionModel.tableCols", n);
        this.designer.emitEvent("tableColChange");
      },
      deep: true,
    },
  },
  methods: {
    importCol() {
      $DialogJs(ColImportDialog, {
        onSave: (e, close) => {
          console.log(e);
          close();
        },
      });
    },
    copyFormJson(e, id) {
      copyToClipboard(id, e, this.$message, "复制列ID成功", "复制列ID失败");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/global.scss";
.edit-icon {
  cursor: pointer;
  color: $--color-primary;
  margin-right: 8px;
}

.option-items-pane ul {
  padding-inline-start: 6px;
  padding-left: 6px; /* 重置IE11默认样式 */
}
li {
  display: flex;
  align-items: center;
}

li.ghost {
  background: #fff;
  border: 2px dotted $--color-primary;
}

.drag-option {
  cursor: move;
}

.small-padding-dialog ::v-deep .el-dialog__body {
  padding: 10px 15px;
}

.dialog-footer .el-button {
  width: 100px;
}
::v-deep {
  .el-tag {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
  }
}
</style>
